<template>
	<view>
		<view :class="[step==1?'box2':'box']">
			<view class="title" v-if="step==2">{{phoneChange?'更换新手机号注册':'使用微信绑定号码极速注册'}}</view>
			<view :class="[phoneChange?'phone1':'phone'] " v-if="step==2">
				<view class="phone-num" v-if="!phoneChange">{{ phone_confusion(info.changePhone?info.changePhone:info.phone) }}</view>
				<input type="number" :focus="focus" adjust-position="false" class="phoneNum" maxlength="11" @blur="phoneBlur"
				 @confirm="phoneCon" v-if="phoneChange">
<!-- 				 
				<view class="replace" v-if="!phoneChange" @tap="changeInput">更换</view>
				<view class="replace" v-if="phoneChange" @tap="doSuccess">返回</view>
				 -->
				
			</view>
			<!-- 			<view class="codeBox" v-if="step==2" >
				<input type="text" maxlength="4" v-model="info.code" placeholder="填写验证码">
				<view class="coder-box">
					<view :class="[codeStatus?'item-coder':'item-coders']" @tap.stop="getCode">{{ time?time:'获取验证码' }}</view>
				</view>
			</view> -->
			<input class="code" type="text" value="" v-model="invitationCode" maxlength="11" minlength="11" placeholder="填写邀请人手机号(选填)"
			 v-if="step==2" />
			<button v-if="step==1" type="primary" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号注册登录</button>
			<button class="btn" v-if="step==2" @tap="doSomething">立即注册</button>
			<view class="agree" v-if="step==2">
				<i class="iconfont iconweixuan icons" style="color: #CCCCCC;" @tap="choose" v-if="chooseStatus"></i>
				<i class="iconfont icongouxuan icons" style="color: #0091FF;" @tap="choose" v-if="!chooseStatus"></i>
				<view class="agree-title" v-if="step==2">
					注册即代表您同意<text @tap="toAgreement">《用户协议与隐私政策》</text>,注册前请仔细阅读。
				</view>
			</view>
		</view>

		<!-- 蒙层 -->
		<view :class="[servise?'maskshow':'maskhide']" class="mask" @tap="close" v-if="serviseShow">
			<view class="servise" @tap.stop>
				<view class="item">
					<text>手机号:</text>
					<input class="item-ipt" type="number" maxlength="11" value="" v-model="info.changePhone" placeholder="请输入手机号" />
				</view>
				<view class="success" @tap="doSuccess">完成</view>
			</view>
		</view>




	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['hasLogin', 'token', 'userId', 'sessionKey', 'userInfoFromWx', 'openId'])
		},
		data() {
			return {
				pages: null,
				step: 1,
				chooseStatus: true,
				//更换手机号
				servise: false,
				serviseShow: false,
				phoneChange: false,
				codeStatus: true,
				fouce: false,
				time: '',
				//邀请码
				invitationCode: '',
				//手机号更改回执
				changStatus: false,
				//要更换的手机号
				info: {
					phone: '***********',
					changePhone: '',
					code: ''
				},
				useData: null,
			};
		},
		onLoad(data) {
			// uni.showModal({
			// 	title: '提示',
			// 	content: '请先点击获取手机号注册!',
			// 	showCancel: false,
			// 	confirmText: '知道了',
			// 	success: (res) => {
			// 		console.log(res);
			// 	}
			// });
			console.log(data)
			if (data.code) {
				//扫码进来的
				this.invitationCode = data.code;
				this.pages = true;
			}
		},
		methods: {
			...mapActions(['login', 'setOpenidSessionkey', 'setUserInfoFromWx']),
			//手机号更改
			phoneBlur(e) {
				this.info.changePhone = e.detail.value;
			},
			//点击成功
			phoneCon(e) {
				this.info.changePhone = e.detail.value;
			},
			//立即注册
			doSomething() {
				// if (!this.info.code) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请先获取验证码!',
				// 		showCancel: false,
				// 		confirmText: '知道了',
				// 		success: (res) => {
				// 			console.log(res);
				// 		}
				// 	});
				// 	return false;
				// }

				if (this.chooseStatus) {
					uni.showModal({
						title: '提示',
						content: '请先仔细阅读《用户协议与隐私政策》,并勾选!',
						showCancel: false,
						confirmText: '知道了',
						success: (res) => {
							console.log(res);
						}
					});
					return false;
				}

				console.log(this.info);
				console.log(this.changStatus);
				this.doRegister();

			},
			//执行注册
			async doRegister() {
				try {
					// 判断更改手机回执是否被改变
					if (this.changStatus) {
						// 改变了 手机号传已更换的changePhone
						let params = {
							session_key: this.sessionKey,
							data: this.useData,
							userInfo: encodeURIComponent(JSON.stringify(this.userInfoFromWx)),
							openId: this.openId,
							code: this.invitationCode,
							mobile: this.info.changePhone,
							captcha: this.info.code
						};

						console.log(66666666, params);

						let res = await this.$request.request.post('/api/user/wxlogin', params)
						console.log(res);
						if (res.code == 200) {
							this.login({
								token: res.data.token,
								userId: res.data.id
							});
							uni.setStorageSync('userinfo', JSON.stringify(res.data))
							uni.showToast({
								title: '注册成功!',
								icon: 'none',
								duration: 1000,
								mask: true
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
								// if (this.pages) {
								// 	uni.navigateTo({
								// 		url: 'chooseGender?pages=' + this.pages
								// 	})
								// } else {
								// 	uni.navigateTo({
								// 		url: 'chooseGender'
								// 	})
								// }
							}, 1000)
						}
					} else {
						let params = {
							session_key: this.sessionKey,
							data: this.useData,
							userInfo: encodeURIComponent(JSON.stringify(this.userInfoFromWx)),
							openId: this.openId,
							code: this.invitationCode,
							mobile: this.info.phone,
							captcha: this.info.code
						};
						// console.log(5555555555, params);
						let res = await this.$request.request.post('/api/user/wxlogin', params)
						console.log(res);
						if (res.code == 200) {
							this.login({
								token: res.data.token,
								userId: res.data.id
							});
							uni.setStorageSync('userinfo', JSON.stringify(res.data))
							uni.showToast({
								title: '注册成功!',
								icon: 'none',
								duration: 1000,
								mask: true
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
								//跳转选择性别
								// if (this.pages) {
								// 	uni.navigateTo({
								// 		url: 'chooseGender?pages=' + this.pages
								// 	})
								// } else {
								// 	uni.navigateTo({
								// 		url: 'chooseGender'
								// 	})
								// }
							}, 1000)
						}
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			getPhoneNumber(e) {
				this.useData = encodeURIComponent(JSON.stringify(e.detail));
				let data = {
					session_key: this.sessionKey,
					data: encodeURIComponent(JSON.stringify(e.detail)),
					openId: this.openId
				}
				console.log(9999999, data);
				uni.request({
					url: this.$config.API + '/api/user/getWxInfo',
					method: "POST",
					data: data,
					success: (res) => { //箭头函数不需要_this
						console.log('请求手机号进行注册', res);
						if (res.data.code == 200) {
							//设置手机号
							this.info.phone = res.data.data.phoneNumber;
							this.step = 2;
						} else {
							let msg = res.data.msg ? res.data.msg : '请求失败';
							this.$tips.fail(msg)
						}
					},
					fail: () => {
						this.$tips.fail()
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			//勾选
			choose() {
				this.chooseStatus = !this.chooseStatus;
			},
			//更换手机号
			changeInput() {


				this.phoneChange = !this.phoneChange;
				this.fouce = true;

				// if(this.info.phone == '18888888888'){
				// 	//未修改获取手机号
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请先点击获取手机号!',
				// 		showCancel: false,
				// 		confirmText: '知道了',
				// 		success: (res) => {
				// 			console.log(res);
				// 		}
				// 	});

				// }else{
				// 	this.serviseShow = true;
				// 	this.servise = true;
				// }
			},
			//关闭弹窗
			close() {
				this.servise = false;
				setTimeout(() => {
					this.serviseShow = false;
				}, 950)
			},
			//获取验证码
			getCode() {
				if (this.info.phone == '18888888888') {
					//未修改获取手机号
					uni.showModal({
						title: '提示',
						content: '请先点击获取手机号!',
						showCancel: false,
						confirmText: '知道了',
						success: (res) => {
							console.log(res);
						}
					});
					return false;
				}

				if (this.time) {
					uni.showToast({
						title: '验证码已发送,请耐心等待!',
						mask: true,
						icon: 'none'
					})
				} else {
					this.codeStatus = false;
					this.getCodes();
					//执行倒计时
					this.down();
				}
			},
			async getCodes() {
				try {
					// 判断更改手机回执是否被改变
					if (this.changStatus) {
						// 改变了 手机号传已更换的changePhone
						let params = {
							mobile: this.info.changePhone,
						};
						let res = await this.$request.request.post('/api/sms/send', params)
						// console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: "验证码已发送,请注意查收!",
								icon: 'none'
							})
						}
					} else {
						let params = {
							mobile: this.info.phone,
						};
						let res = await this.$request.request.post('/api/sms/send', params)
						// console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: "验证码已发送,请注意查收!",
								icon: 'none'
							})
						}
					}

				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//倒计时
			down() {
				this.time = 60;
				let down = setInterval(() => {
					this.time--;
					if (this.time <= 0) {
						clearInterval(down);
						this.codeStatus = true;
					}
				}, 1000)
			},
			//点击完成
			doSuccess() {
				if (this.info.changePhone == '') {
					this.changeInput();
					this.fouce = false;
					uni.hideKeyboard();
				} else {
					if (!(/^1[3456789]\d{9}$/.test(this.info.changePhone))) {
						uni.showToast({
							title: '请输入正确的11位手机号!',
							icon: 'none'
						});
						return false;
					}
					//修改更改手机号回执
					this.changStatus = true;
					// this.close();

					this.changeInput();
					this.fouce = false;
					uni.hideKeyboard();
				}

			},
			//前往用户隐私协议
			toAgreement() {
				uni.navigateTo({
					url: "agreement"
				})
			},
			//手机号
			phone_confusion(e) {
				return e.substr(0, 3) + "****" + e.substr(7);
			}
		}
	}
</script>

<style lang="scss">
	@import 'register.scss'
</style>
